<template>
  <div class="home">
      <div>
          <p>a:{{a}}</p>
          <p>b:{{b}}</p>
      </div>
      <div>
          <p>doubleA:{{doubleA}}</p>
          <p>doubleB:{{doubleB}}</p>
          <p>both:{{both}}</p>
          <p>doubleBoth:{{doubleBoth}}</p>
      </div>
      <br>
      <div>
          <h3>修改数据的方法_同步</h3>
          <p>
              <button @click="addA()">addA</button>
              <button @click="addAn(10)">addAn</button>
              <button @click="addBoth({m:1,n:2})">addBoth</button>
              <!-- commit/dispatch 传入一个对象参数 type:触发的方法名  -->
              <!-- <button @click="$store.commit({type:'addBoth',m:1,n:2})">addBoth</button> -->
              <button @click="addBoth({type:'addBoth',m:1,n:2})">addBoth</button>
          </p>
      </div>
      <br>
      <div>
          <h3>修改数据的方法_异步</h3>
          <p>
              <button @click="addA_Async()">addA</button>
              <button @click="addAn_Async(10)">addAn</button>
              <button @click="handlerFn">addBoth_Async</button>
          </p>
      </div>
  </div>
</template>

<script>
// 如何使用$store
// 1. 通过$store实例手动取值和调用方法  => 麻烦
// $store.state.xxx
// $store.getters.xxx
// $store.commit('xxx')
// $store.dispatch('xxx')

// 2. 根据$store实例中的数据和方法 => 在当前实例中生成新的计算属性和方法

// 3. 借助vuex提供的辅助函数 =>  辅助函数默认返回一个对象 => 需要将对象拼接到computed和methods对象中
import {mapState,mapGetters,mapMutations,mapActions} from "vuex";


// mapState(["a","b"])  辅助函数默认返回一个对象 
// {
//     a:function(){
//         return this.$store.state.a;
//     },
//     b:function(){
//         return this.$store.state.b;
//     },
// }

// var obj = {a:1,b:2,c:3}

// var data = {
//     ...obj,
// }

console.log("辅助函数mapState",mapState(["a","b"]));



export default {
  name: 'HomeView',
  computed:{
    // store属性处理(state getters)
    // 当前实例 生成计算属性 -> 依赖于$store.state.a
    // a:function(){
    //     return this.$store.state.a;
    // },
    // b:function(){
    //     return this.$store.state.b;
    // },
    ...mapState(["a","b"]),  // 对应属性名赋值 => 计算属性名和store中属性名一致

    // 自定义属性名     在vue实例中自定义属性名 => 可以访问计算属性名冲突
    // A:function(){
    //     return this.$store.state.a;
    // },
    ...mapState({
        A:"a",    // this.A (当前Vue实例) = ()=> this.$store.state.a;
        B:(state)=> state.b,
        BOTH:(state)=> state.a+state.b,
    }),

    // doubleA:function(){
    //     return this.$store.getters.doubleA;
    // },
    // doubleB:function(){
    //     return this.$store.getters.doubleB;
    // },
    // both:function(){
    //     return this.$store.getters.both;
    // },
    // doubleBoth:function(){
    //     return this.$store.getters.doubleBoth;
    // },
    ...mapGetters(["doubleA","doubleB","both","doubleBoth"])
  },
  methods:{
    // 在当前vue实例中绑定同名方法  => 通过此方法调用$store中的mutations actions中的方法 
    // addA:function(){
    //     return this.$store.commit("addA");
    // },
    // addAn:function(n){
    //     return this.$store.commit("addAn",n);
    // },
    // addBoth:function(obj){ // 参数是对象
    //     if(obj["type"]){ //  
    //         return this.$store.commit(obj);
    //     }else{
    //         return this.$store.commit("addBoth",obj);
    //     }
    // },
    ...mapMutations(["addA","addAn","addBoth"]),
   

    // addA_Async:function(){
    //     return this.$store.dispatch('addA_Async');
    // },
    // addAn_Async:function(n){
    //     return this.$store.dispatch('addAn_Async',n);
    // }
    ...mapActions(["addA_Async","addAn_Async","addBoth_Async"]),

    handlerFn:function(){
      // var res = this.addBoth_Async()
      // console.log(res);

      this.addBoth_Async().then((res)=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  mounted(){
    console.log("当前实例",this);
    console.log("当前store实例",this.$store);
  }
}
</script>
